<template>
  <div class="cart_container">
    <div class="header">购物车</div>
    <div class="cart_list">
      <div class="cart_item" v-for="(item,index) in cartItems" :key="index">
        <div><img :src="item.img" alt=""></div>
        <div>{{item.name}}</div>
        <div class="cart_item_price">￥{{item.price}}.00元</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      
    }
  },
  computed:{
    cartItems(){
      return this.$store.state.cartItems
    }
  }
}
</script>

<style scoped>
  .cart_container {
    width: 100%;
  }
  .cart_list {
    width: 100;
  }
  .header {
    width: 100%;
    height: 64px;
    background-color: black;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .cart_list {
    width: 100%;
  }
  .cart_item {
    width: 100%;
    height: 120px;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
  }
  .cart_item img {
    /* width: 100%; */
    height: 100px;
  }
  .cart_item_price {
    color: red;
  }
</style>
